import React from 'react';
import ReactDOM from 'react-dom/client';

// 开始 Redux
// Redux 三大核心概念之一：action 描述数据如何改变（对象）

// 计数器数字增1
const action1 = { type: 'increment' };
// 计数器数字增10
const action2 = { type: 'increment', payload: 10 };

// 需求：定义一个函数用来创建上面的对象
// const increment = (payload) => {
//   return {
//     type: 'increment',
//     payload,
//   };
// };

// 上面函数的间简写
const increment = (payload) => ({
  type: 'increment',
  payload,
});

// 使用 action creator 创建 action
const action11 = increment();
const action22 = increment(10);
console.log(action11, action22);

// todos 待办事项
// 添加任务
const action3 = { type: 'add', payload: '吃饭' };
// 删除任务
const action4 = { type: 'delete', payload: 1 };
// 练习：写一个 todo 的action creator

// Redux 三大核心概念之二：reducer（处理数据）
// 参数：state: 你要处理的数据，action: 如何处理数据
// 返回值：处理后的state（必须要有的）
const reducer1 = (state, action) => {
  // switch (action.type) {
  //   case 'increment':
  //     return state + action.payload;

  //   default:
  //     return state;
  // }
  // 改为 if/else 实现 reducer
  if (action.type === 'increment') {
    return state + action.payload;
  } else {
    return state;
  }
};

// 调用 reducer 处理数据
console.log(reducer1(0, action22)); // 10
// 再次调用 reducer ，参数就是上次处理过后的值
console.log(reducer1(10, action22)); // 20

// 应用（项目）渲染的根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 渲染应用
root.render(<div>Redux</div>);
